<template>
  <view class="songDetailContainer">
    <view class="bg"></view>
    <view class="content">
      <view class="title">{{ song.title }}</view>
      <view class="discContainer discAnimation" v-show="current == 0">
        <view class="disc"></view>
        <view class="circle">
          <image class="musicImg" :src="song.imageUrl"></image>
        </view>
      </view>
      <scroll-view
        class="h-full"
        :scroll-y="true"
        :refresher-enabled="false"
        :scroll-anchoring="true"
        v-show="current == 1"
      >
        <view class="prompt" v-html="song.lyric" style="white-space: pre-line"></view>
      </scroll-view>

      <u-tabs
        class="u-tabs-con"
        :list="list1"
        @change="handleChange"
        :current="current"
        :scrollable="true"
        active-color="#fff"
        inactive-color="#ccc4c2"
        :gutter="20"
        :bar-width="20"
      ></u-tabs>
      <view class="share">
        <u-icon name="share" color="#fff" size="40" @click="shareClick"></u-icon>
        <text>分享</text>
      </view>
      <!-- 进度条控制区域 -->
      <view class="progressControl">
        <text>{{ currentTimeText }}</text>
        <slider
          style="width: 560rpx"
          @change="handleSliderChange"
          :value="sliderIndex"
          :max="maxSliderIndex"
          activeColor="#ea588e"
          backgroundColor="#b9c2c5"
          block-color="#fff"
          block-size="12"
        />
        <text>{{ totalTimeText }}</text>
      </view>

      <!-- 底部控制播放区域 -->
      <view class="musicControl">
        <u-icon name="star" color="#fff" size="30" @click="starClick"></u-icon>
        <u-icon
          name="rewind-left-fill"
          @click="handlePrev"
          color="#fff"
          size="30"
          id="pre"
        ></u-icon>
        <u-icon
          name="pause-circle-fill"
          @click="onPauseAudio"
          v-if="isPlay"
          color="#fff"
          size="40"
        ></u-icon>
        <u-icon name="play-circle-fill" @click="onPlayAudio" v-else color="#fff" size="40"></u-icon>
        <u-icon
          name="rewind-right-fill"
          @click="handleNext"
          color="#fff"
          size="30"
          id="next"
        ></u-icon>
        <u-icon name="grid" @click="show = true" color="#fff" size="30"></u-icon>
      </view>
    </view>
    <u-action-sheet
      class="action-sheet"
      :list="data.list"
      v-model="show"
      @click="sheetClick"
      cancel-text="关闭"
    ></u-action-sheet>
  </view>
</template>

<script>
import moment from 'moment'
// import { download } from '@/utils/download'
// import { drawingRecord } from '@/api/music'

export default {
  props: {
    fileUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: 0,
      song: {},
      isPlay: false,
      currentTime2: 0,
      audioList: [],
      index: 0,
      show: false,
      innerAudioContext: null,
      startId: 0,
      endId: 0,
      sliderIndex: 0,
      maxSliderIndex: 100,
      currentTimeText: '00:00',
      totalTimeText: '00:00',
      current: 0,
      list1: [
        { customMode: 0, name: '歌曲' },
        { customMode: 1, name: '歌词' }
      ],
      data: {
        list: [
          {
            text: '下载音频',
            fontSize: 28
          },
          {
            text: '下载视频',
            fontSize: 28
          }
        ]
      }
    }
  },
  created() {
    this.innerAudioContext = uni.createInnerAudioContext()

    this.innerAudioContext.onEnded(() => {
      this.isPlay = false
      this.currentTimeText = '00:00'
      this.sliderIndex = 0
      this.handleNext()
    })

    this.innerAudioContext.onTimeUpdate(() => {
      this.currentTimeText = moment(this.innerAudioContext.currentTime * 1000).format('mm:ss')
      this.sliderIndex = this.innerAudioContext.currentTime
    })

    this.innerAudioContext.onCanplay(() => {
      this.totalTimeText = moment(this.innerAudioContext.duration * 1000).format('mm:ss')
      this.maxSliderIndex = this.innerAudioContext.duration
    })

    this.innerAudioContext.onPause(() => {
      this.currentTime2 = this.innerAudioContext.currentTime
    })

    this.innerAudioContext.onPlay(() => {
      this.innerAudioContext.seek(this.currentTime2)
      console.log(this.currentTime2, 'currentTime2.value')
    })
    this.getAudioList()
  },
  beforeDestroy() {
    this.innerAudioContext.destroy()
  },
  methods: {
    async getAudioList() {
      // const { lists } = await drawingRecord({
      //   status: 3,
      //   startId: this.startId,
      //   endId: this.endId,
      //   pageNo: 1,
      //   pageSize: 100
      // })
      // this.audioList = lists
      // for (let i = 0; i < this.audioList.length; i++) {
      //   if (this.audioList[i].id == this.id) {
      //     this.index = i
      //     console.info('index', i)
      //   }
      // }
      // this.song = this.audioList[this.index]
      this.innerAudioContext.autoplay = true
      this.innerAudioContext.src = this.fileUrl
      this.innerAudioContext.play()
      this.isPlay = true
    },

    onPauseAudio() {
      this.innerAudioContext.pause()
      this.isPlay = false
    },

    onPlayAudio() {
      this.innerAudioContext.src = this.song.audioUrl
      this.innerAudioContext.play()
      this.isPlay = true
    },

    handlePrev() {
      this.innerAudioContext.stop()
      this.sliderIndex = 0
      this.currentTimeText = '00:00'
      this.currentTime2 = 0
      if (this.index == 0) {
        this.index = this.audioList.length
      }

      this.innerAudioContext.src = this.audioList[this.index - 1].audioUrl
      this.song.title = this.audioList[this.index - 1].title
      this.song.imageUrl = this.audioList[this.index - 1].imageUrl
      this.song.duration = this.audioList[this.index - 1].duration
      this.song.lyric = this.audioList[this.index - 1].lyric
      this.innerAudioContext.play()
      this.isPlay = true
      this.index -= 1
      console.log(this.index, 'index')
    },

    handleNext() {
      this.innerAudioContext.stop()
      this.sliderIndex = 0
      this.currentTimeText = '00:00'
      this.currentTime2 = 0
      console.log(this.sliderIndex.value, this.currentTimeText, '下一首')
      if (this.index == this.audioList.length - 1) {
        this.index = -1
      }

      this.innerAudioContext.src = this.audioList[this.index + 1].audioUrl
      this.song.title = this.audioList[this.index + 1].title
      this.song.imageUrl = this.audioList[this.index + 1].imageUrl
      this.song.duration = this.audioList[this.index + 1].duration
      this.song.lyric = this.audioList[this.index + 1].lyric
      this.innerAudioContext.play()
      this.isPlay = true
      this.index += 1
      console.log(this.index, 'index')
    },

    // 文件下载
    async onFileDownload(drawing) {
      uni.setClipboardData({
        data: drawing,
        success: function () {
          uni.showToast({ title: '复制成功，请打开浏览器下载', duration: 2000 })
        }
      })
    },

    sheetClick(index) {
      if (index == 0) {
        this.onFileDownload(this.song.audioUrl)
      } else if (index == 1) {
        this.onFileDownload(this.song.videoUrl)
      }
    },

    //变更滑块位置
    handleSliderChange(e) {
      this.changePlayProgress(e.detail ? e.detail.value : e)
    },

    //更改播放进度
    changePlayProgress(value) {
      this.sliderIndex = value
      this.innerAudioContext.seek(value)
      this.currentTimeText = moment(value * 1000).format('mm:ss')
    },

    // tabs部分
    handleChange(index) {
      this.current = index
    },

    starClick() {
      uni.showToast({ title: '敬请期待' })
    },

    shareClick() {
      uni.showToast({ title: '敬请期待' })
    }
  }
}
</script>

<style lang="scss" scoped>
.songDetailContainer {
  height: 100vh;
  width: 100%;

  position: relative;
  .bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 0;
    filter: blur(60px);
    background: linear-gradient(135deg, rgba(236, 176, 248, 0.8), rgba(255, 224, 198, 0.9));
  }
  .bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* 深色遮罩增强对比度 */
  }
  .content {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    .title {
      color: #fff;
      position: absolute;
      top: 30rpx;
    }
    .prompt {
      color: #fff;
      position: absolute;
      top: 80rpx;
      left: 40rpx;
      right: 40rpx;
      font-size: 38rpx;
      line-height: 68rpx;
    }
    .h-full {
      position: absolute;
      top: 120rpx;
      left: 40rpx;
      right: 40rpx;
      height: 800rpx;
      width: calc(100% - 80rpx);
    }
    .u-tabs-con {
      position: absolute;
      bottom: 300rpx;
      color: #fff;
    }
  }
}
.content ::v-deep .u-tabs {
  background: none !important;
}
.share {
  position: absolute;
  bottom: 320rpx;
  right: 50rpx;
  color: #fff;
  display: flex;
  align-items: center;
  text {
    margin-left: 10rpx;
    font-size: 24rpx;
  }
}
/* 磁盘 */
.discContainer {
  position: relative;
  top: 200rpx;
  // width: 598rpx;
  // height: 598rpx;
  width: 490rpx;
  height: 490rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 50%;
}

.discAnimation {
  animation: disc 8s linear infinite;
  animation-delay: 1s;
}

/*
  @keyframes: 设置动画帧
    1) from to
      - 使用于简单的动画，只有起始帧和结束帧
      - 北京 - 上海  直达
    2) 百分比
      - 多用于复杂的动画，动画不止两帧
      - 北京 - 上海 ---> 北京 -- 天津 --- 深圳 --- 上海
      - 0% - 100%, 可以任意拆分
*/
@keyframes disc {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.disc {
  width: 100%;
  height: 100%;
}

.songDetailContainer .discContainer .musicImg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 370rpx;
  height: 370rpx;
  border: 1rpx solid transparent;
  border-radius: 50%;
}
.circle {
  position: absolute;
  left: 30rpx;
  top: 30rpx;
  width: 430rpx;
  height: 430rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 50%;
}
/* 底部控制播放区域 */
.musicControl {
  position: absolute;
  bottom: 80rpx;
  left: 60rpx;
  width: calc(100% - 120rpx);
  display: flex;
  justify-content: space-between;
}
.musicControl text {
  width: 20%;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  color: #fff;
  font-size: 50rpx;
}
.musicControl text.big {
  font-size: 80rpx;
}
/* 进度条控制区域 */
.progressControl {
  position: absolute;
  bottom: 200rpx;
  width: 640rpx;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  color: #fff;
}

.action-sheet ::v-deep .u-action-sheet-item {
  align-items: baseline;
  padding-left: 30rpx;
}
</style>
